@-webkit-keyframes zoomSmallIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(1.8, 1.8, 1.8) translate3d(0, 200px, 0);
        transform: scale3d(1.8, 1.8, 1.8) translate3d(0,  200px, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1) translate3d(0, 0, 0);
        transform: scale3d(1,1,1) translate3d(0, 0, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes zoomSmallIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(3,3,3) translate3d(0, 200px, 0);
        transform: scale3d(3,3,3) translate3d(0, 200px, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1) translate3d(0, 0, 0);
        transform: scale3d(1,1,1) translate3d(0, 0, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.zoomSmallIn {
    -webkit-animation-name: zoomSmallIn;
    animation-name: zoomSmallIn;
}

@-webkit-keyframes zoomBigOut {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        opacity: 1;
        -webkit-transform: scale3d(1.8, 1.8, 1.8) translate3d(0, 200px, 0);
        transform: scale3d(1.8, 1.8, 1.8) translate3d(0, 200px, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.8, 1.8, 1.8) translate3d(0,200px, 0);
        transform: scale3d(1.8, 1.8, 1.8) translate3d(0, 200px, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes zoomBigOut {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        opacity: 1;
        -webkit-transform: scale3d(1.8, 1.8, 1.8) translate3d(0, 200px, 0);
        transform: scale3d(3,3,3) translate3d(0, 200px, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.8, 1.8, 1.8) translate3d(0, 200px, 0);
        transform: scale3d(3,3,3) translate3d(0, 200px, 0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.zoomBigOut {
    -webkit-animation-name: zoomBigOut;
    animation-name: zoomBigOut;
}
